<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<head>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="-1">
    <link rel="stylesheet" href="/plugins/jquery-ui/jquery-ui.min.css">
    <link rel="stylesheet" href="/plugins/fullcalendar-2.4.0/fullcalendar.css">
    <style>

        body {
            margin-top: 40px;
            text-align: center;
            font-size: 14px;
            font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
        }

        #wrap {
            width: 1100px;
            margin: 0 auto;
        }

        #external-events {
            float: left;
            width: 150px;
            padding: 0 10px;
            border: 1px solid #ccc;
            background: #eee;
            text-align: left;
        }

        #external-events h4 {
            font-size: 16px;
            margin-top: 0;
            padding-top: 1em;
        }

        #external-events .fc-event {
            margin: 10px 0;
            cursor: pointer;
        }

        #external-events p {
            margin: 1.5em 0;
            font-size: 11px;
            color: #666;
        }

        #external-events p input {
            margin: 0;
            vertical-align: middle;
        }

        #calendar {
            float: right;
            width: 900px;
        }

        #script-warning {
            display: none;
            background: #eee;
            border-bottom: 1px solid #ddd;
            padding: 0 10px;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-size: 12px;
            color: red;
        }

        #loading {
            display: none;
            position: absolute;
            top: 10px;
            right: 10px;
        }

    </style>

    <title></title>

</head>
<body>

<div id='wrap'>

    <div id='external-events'>
        <h4>工作类型</h4>

        <div id="worktype">
            <div class='fc-event' typeid="1">平日工作</div>
            <div class='fc-event' typeid="2">周末工作</div>
            <div class='fc-event' typeid="3">休息</div>
        </div>

        <p>
            <button id="btnSave" onclick="SaveWorkDay()">保存</button>
            <button id="btnReset" onclick="ResetWorkDay()">重置</button>
        </p>
    </div>

    <div id='script-warning'>
        <code>加载出错</code>
    </div>

    <div id='loading'>读取中，请稍候...</div>

    <div id='calendar'></div>

    <div style='clear:both'></div>

</div>


<script type="text/javascript" src="/plugins/fullcalendar-2.4.0/lib/moment.min.js"></script>
<script type="text/javascript" src="/plugins/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/plugins/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="/plugins/fullcalendar-2.4.0/fullcalendar.js"></script>
<script type="text/javascript" src="/plugins/fullcalendar-2.4.0/lang/zh-cn.js"></script>
<script>

    $(document).ready(function () {

        $("#btnSave").button({
            icons: {
                primary: "ui-icon-disk"
            }
        });
        $("#btnReset").button({
            icons: {
                primary: "ui-icon-refresh"
            }
        });


        /* initialize the calendar
         -----------------------------------------------------------------*/

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month'
            },
            events: {
                url: '/setting/getworkdata',
                type: 'POST',
                data: {
                    stdate: moment().format("YYYY-MM-DD")
                },
                error: function () {
                    $('#script-warning').show();
                }
            },
            theme: true,
            eventStartEditable: true,
            eventDurationEditable: false,
            droppable: true, // this allows things to be dropped onto the calendar
            drop: function (date, allDay, jsEvent, ui) {
                // is the "remove after drop" checkbox checked?
                var i = $(this);
                var allEvents = $("#calendar").fullCalendar('clientEvents');

                $("#calendar").fullCalendar('removeEvents', function (n, i) {
                    return n._start._d.toLocaleDateString() == date._d.toLocaleDateString()
                });
                if (allEvents != null && allEvents.length > 0) {
                    var eventData = {
                        title: allEvents[allEvents.length - 1].title,
                        start: allEvents[allEvents.length - 1].start,
                        typeId: allEvents[allEvents.length - 1].typeId
                    };
                    $('#calendar').fullCalendar('renderEvent', eventData, false);

                }
            },
            eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
                $("#calendar").fullCalendar('removeEvents', function (n, i) {
                    return n._start._d.toLocaleDateString() == event._start._d.toLocaleDateString()
                });
                var eventData = {
                    title: event.title,
                    start: event.start,
                    typeId: event.typeId
                };
                $('#calendar').fullCalendar('renderEvent', eventData, false);
            }
        });

        $.ajax({
            type: "POST",
            url: "/setting/getworktype",
            dataType: "json",
            success: function (data) {
                if (data.Result != 1) {

                } else {

                    $("#worktype").html("");
                    for (i = 0; i < data.JsonContent.length; i++) {
                        var da = data.JsonContent[i];
                        $("#worktype").append("<div class='fc-event' typeid='" + da.id + "'>" + da.type + "</div>");
                    }

                    /* initialize the external events
                     -----------------------------------------------------------------*/

                    $('#external-events .fc-event').each(function () {

                        // store data so the calendar knows to render an event upon drop
                        $(this).data('event', {
                            title: $.trim($(this).text()), // use the element's text as the event title
                            stick: true, // maintain when user navigates (see docs on the renderEvent method)
                            typeId: $(this).attr("typeid")
                        });

                        // make the event draggable using jQuery UI
                        $(this).draggable({
                            zIndex: 999,
                            revert: true,      // will cause the event to go back to its
                            revertDuration: 0  //  original position after the drag
                        });

                        // $("#worktype").append("<div class='fc-event' typeid="1">平日工作</div>");
                        /*                <div class='fc-event' typeid="1">平日工作</div>
                         <div class='fc-event' typeid="2">周末工作</div>
                         <div class='fc-event' typeid="3">休息</div>*/
                    });
                }
            },
            error: function (data) {
                //Common.ShowAlert("错误", "访问服务器失败或数据返回格式错误", function () { });
                alert("连接异常，请稍后重试");
            }
        });


    });

    function CheckResult(data) {
        if (data.Result != 1) {
            /*            Common.ShowAlert("操作失败", data.ResultDesc == undefined ? "未知异常" : data.ResultDesc, function () {

             });*/
            alert(data.ResultDesc == undefined ? "未知异常" : data.ResultDesc);
        } else {
            alert("操作成功");
            //Common.Show("成功", "操作成    功");
            //$("#tg").datagrid("reload", {PlanId: treeSelectId});
        }
        //$('#dept_edit').dialog('close');

    }

    function SaveWorkDay() {
        var allEvents = $("#calendar").fullCalendar('clientEvents');
        var view = $('#calendar').fullCalendar('getView');
        var json = JSON.stringify(allEvents);
        var i = view.intervalStart;
        var j = view.intervalEnd;
        $.ajax({
            type: "POST",
            url: "/setting/saveworkday",
            dataType: "json",
            data: {
                json: json,
                stdate: moment(view.intervalStart._d).format("YYYY-MM-DD"),
                eddate: moment(view.intervalEnd._d).format("YYYY-MM-DD")

            },
            success: function (data) {
                CheckResult(data)

            },
            error: function (data) {
                //Common.ShowAlert("错误", "访问服务器失败或数据返回格式错误", function () { });
                alert("连接异常，请稍后重试");
            }
        });
    }

    function ResetWorkDay() {
        $('#calendar').fullCalendar('refetchEvents');
    }
</script>
</body>
</html>